<script setup>
import { ref, computed } from 'vue'
import { hasPermission } from '@/directives/permission'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  loadmoreStatus: {
    type: String,
    default: 'loadmore'
  },
  type: {
    type: String,
    default: 'outplan' // outplan or inplan
  }
})

const pernGoods = computed(() => {
  return props.type === 'outplan' ? 'outgoods' : 'ingoods'
})

const emit = defineEmits(['clickBtn'])
const activeIndex = ref(null)
// 新增状态用于跟踪菜单是否应该在上方显示
// 存储每个菜单项的显示方向
const isMenuAbove = ref({})

const toggleMenu = (e, index) => {
  // 如果是关闭菜单，直接返回
  if (activeIndex.value === index) {
    activeIndex.value = null
    return
  }

  try {
    // 获取系统信息
    const { windowHeight } = uni.getSystemInfoSync()
    // 计算屏幕30%位置的阈值
    const threshold = windowHeight * 0.6

    // 获取点击事件的y坐标
    let clickY = 0
    if (e && e.touches && e.touches[0]) {
      clickY = e.touches[0].clientY
    } else if (e && e.clientY) {
      clickY = e.clientY
    }

    // 判断点击位置：如果在屏幕下方30%区域，菜单向上显示
    isMenuAbove.value[index] = clickY > threshold
  } catch (error) {
    // 失败时使用基于索引的回退方案
    isMenuAbove.value[index] = index > props.list.length * 0.6
  }

  // 打开菜单
  activeIndex.value = index
}

const closeMenu = () => {
  activeIndex.value = null
}


const changeBtn = (val, item) => {
  if (val == 'approvals' && item.status == '2') return uni.$u.toast("审核已通过")
  emit('clickBtn', val, item)
  closeMenu()
}
</script>

<template>
  <!-- 添加明确的根容器并设置样式 -->
  <view class="reservation-list-container">
    <view v-if="list.length">
      <view class="list-card flex" v-for="(item, index) in list" :key="index">
        <view class="info-section">
          <view class="company-name flex">
            <text style="width: 160rpx;">计划名称：</text>
            <text class="overflow_1" style="flex: 1;">{{ item.planname }}</text>
          </view>
          <view class="company-name flex">
            <text style="width: 160rpx;">单据号：</text>
            <text class="overflow_1" style="flex: 1;">{{ item.billno }}</text>
          </view>
          <view class="footer flex">
            <view class="date-info">
              <text class="date-icon">📅</text>
              <text class="date-text">{{ item.expectdate }}</text>
            </view>
            <view class="status_btn">{{ item.statusStr }}</view>
          </view>
        </view>
        <view class="action-buttons">
          <view class="more-btn flex" @click.stop="toggleMenu($event, index)">
            更多
            <u-icon :name="activeIndex === index ? 'arrow-up' : 'arrow-down'" color="#666" size="28">
            </u-icon>
          </view>

          <!-- 使用条件渲染而非动画过渡，避免闪烁问题 -->
          <view class="overlay" v-if="activeIndex === index" @tap="activeIndex = null" @touchmove.stop></view>
          <view v-if="activeIndex === index" :class="['btn-content', (isMenuAbove[index] === true) ? 'above' : '']"
            @click.stop>
            <view class="action-btn flex edit-btn" v-if="hasPermission(`logistics:${type}:edit`)"
              @click="changeBtn('edit', item)">
              <text class="btn-icon">✏️</text>
              <text class="btn-text">编辑</text>
            </view>
            <view class="action-btn flex delete-btn" v-if="hasPermission(`logistics:${type}:remove`)"
              @click="changeBtn('delete', item)">
              <text class="btn-icon">🗑️</text>
              <text class="btn-text">删除</text>
            </view>
            <view class="action-btn flex addGoods-btn" v-if="hasPermission(`logistics:${pernGoods}:add`)"
              @click="changeBtn('addGoods', item)">
              <text class="btn-icon">📥️</text>
              <text class="btn-text">添加货物</text>
            </view>
            <view class="action-btn flex approvals-btn" @click="changeBtn('approvals', item)">
              <text class="btn-icon">📋️</text>
              <text class="btn-text">提交审核</text>
            </view>
            <view class="action-btn flex sendGoods-btn" @click="changeBtn('sendGoods', item)">
              <text class="btn-icon">{{ type == 'outplan' ? '📦️' : '🚚️' }}</text>
              <text class="btn-text">{{ type == 'outplan' ? '备货' : '发货' }}</text>
            </view>
            <view class="action-btn flex sendGoods-btn" @click="changeBtn('carArrive', item)">
              <text class="btn-icon">🚚️</text>
              <text class="btn-text">车辆到达确认</text>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore margin-top="20" :status="loadmoreStatus" />
    </view>
    <view v-else>
      <u-empty mode="list"></u-empty>
    </view>
  </view>
</template>

<style lang="scss" scoped>
/* 根容器样式，确保没有额外的边距和间距 */
.reservation-list-container {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: visible; /* 修改为visible，确保菜单不被根容器截断 */
  box-sizing: border-box;
  position: relative; /* 确保子元素定位正确 */
}

.footer {
  justify-content: flex-start;

  .status_btn {
    margin-left: 20rpx;
    font-size: 26rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    background: #f6ffed;
    color: #52c41a;
    border: 1rpx solid #b7eb8f;
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  background: transparent;
}

.list-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1rpx solid #eee;
  margin-top: 20rpx;
  position: relative;
  width: 100%;
  box-sizing: border-box;

  .info-section {
    flex: 1;
    min-width: 0;

    .company-name {
      font-size: $list-font-size;
      color: #333;
      margin-bottom: 12rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }

    .date-info {
      display: flex;
      align-items: center;

      .date-icon {
        font-size: 26rpx;
        margin-right: 8rpx;
      }

      .date-text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  .action-buttons {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 20rpx;
    width: 150rpx;
    overflow: visible; /* 确保菜单项不被截断 */

    .more-btn {
      padding: 10rpx 16rpx;
      border-radius: 8rpx;
      background-color: #f5f5f5;
      color: #666;
      font-size: 28rpx;
    }

    // 确保菜单中的按钮不会被全局样式影响
    .btn-content .action-btn {
      padding: 20rpx 24rpx !important;
      border-radius: 0 !important;
      background: #ffffff !important;
      border: none !important;
      width: 100% !important;
      box-sizing: border-box !important;
      display: flex !important;
      align-items: center !important;
    }

    .btn-content {
      position: absolute !important;
      top: calc(100% + 10rpx) !important;
      right: 0 !important;
      width: 240rpx !important;
      background: #ffffff !important;
      border-radius: 12rpx !important;
      box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.12) !important;
      z-index: 99999 !important;
      padding: 16rpx 0 !important;
      overflow: visible !important;
      border: 1rpx solid #ddd !important;
      /* 确保渲染稳定性 */
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      /* 修复移动端渲染问题 */
      transform: translateZ(0);
      -webkit-transform: translateZ(0);

      &.show {
        opacity: 1;
        visibility: visible;
      }

      &.above {
        top: auto !important;
        bottom: calc(100% + 10rpx) !important;
      }
    }

    .action-btn {
      padding: 20rpx 24rpx;
      display: flex;
      align-items: center;
      transition: all 0.2s;

      .btn-icon {
        margin-right: 12rpx;
        font-size: 32rpx;
        font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
      }

      .btn-text {
        font-size: 28rpx;
        white-space: nowrap;
        color: $list-color !important;
      }
    }

    .edit-btn {
      color: #409EFF;
    }

    .delete-btn {
      color: #FF4949;
    }
  }

  /* 覆盖任何可能的全局样式 */
  .list-card {
    overflow: visible !important;
    position: relative; /* 确保相对定位 */
  }

  .action-buttons {
    overflow: visible !important;
  }
  
  /* 确保菜单内容不会被任何限制截断 */
  .btn-content {
    max-height: none !important;
    height: auto !important;
    white-space: nowrap; /* 确保文本不换行 */
  }
  
  /* 确保所有父容器都不会截断内容 */
  :deep(.reservation-list-container) {
    overflow: visible !important;
  }
  
  :deep(.list-card) {
    overflow: visible !important;
  }
  
  :deep(.action-buttons) {
    overflow: visible !important;
  }
}
</style>